import { useGSAP } from '@gsap/react'
import Image from 'next/image'
import gsap from 'gsap'
import { list, tableList } from './datas'
import { twMerge } from 'tailwind-merge'

const TabLeft = () => {
  useGSAP(() => {
    // 元素进入动画
    gsap.from('.list li', {
      opacity: 0,
      y: 10,
      duration: 1,
      stagger: 0.04,
      ease: 'power3.out'
    })
  })
  
  return (
    <div className='w-[1650px] max-1650:w-auto px-[10px] lg:px-[20px] mx-auto'>
      <ul className='list grid grid-cols-2 lg:grid-cols-3 gap-[10px] md:gap-[20px] 2xl:gap-[60px] lg-[20px] mb-[20px] md:mb-[66px]'>
        {list.map((item, index) => (
          <li className='group relative text-white select-none cursor-pointer perspective-1000 w-full 2xl:w-fit' key={index}>
            <div className='backface-hidden rounded-lg lg:rounded-[20px] transform-style-3d transition-transform duration-700 group-hover:rotate-y-180 perspective-origin-center' style={{ transitionTimingFunction: 'cubic-bezier(0.4, 0.2, 0.2, 1)' }}>
              <div className='relative w-full 2xl:w-[510px] aspect-[510/422]'>
                <Image alt='product' src={`/images/product/li${index + 1}.png`} fill className='object-contain' draggable={false} />
              </div>
              <div className='absolute bottom-0 left-0 right-0 pl-[20px] md:pl-[50px] xl:pl-[80px] pb-[15px] md:pb-[30px] xl:pb-[44px] pr-[30px] md:pr-[50px] xl:pr-[80px] flex items-center justify-between backface-hidden' style={{ transform: 'translateZ(30px)' }}>
                <div>
                  <p className='text-[18px] md:text-[32px] leading-[18px] md:leading-[32px] font-bold mb-[5px] md:mb-[10px]'>{item.title}</p>
                  <p className='text-xs md:text-base lg:text-[18px] md:leading-[18px]'>{item.subtitle}</p>
                </div>
                <div className='size-[25px] md:size-[43px] relative'>
                  <Image alt='product' src='/images/product/array1.png' fill className='object-contain' draggable={false} />
                </div>
              </div>
            </div>
            <div className='absolute flex flex-col rounded-lg md:rounded-[20px] rotate-y-180 group-hover:rotate-y-360 transition-transform duration-700 inset-0 backface-hidden perspective-origin-center transform-style-3d bg-gradient-to-b from-[#1356A1] to-[#0F74D0] pl-[15px] md:pl-[50px] xl:pl-[85px] pt-[15px] md:pt-[50px] xl:pt-[70px] pr-[10px] md:pr-[30px] xl:pr-[55px] pb-[10px] md:pb-[40px]' style={{ transitionTimingFunction: 'cubic-bezier(0.4, 0.2, 0.2, 1)' }}>
              <p className='text-[18px] md:text-[32px] leading-[18px] md:leading-[32px] font-bold mb-[5px] md:mb-[10px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>{item.title}</p>
              <p className='text-xs md:text-[20px] md:leading-[20px] border-b border-[#fff] pb-[10px] md:pb-[18px] md:w-[293px] mb-[10px] md:mb-[22px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>{item.subtitle}</p>
              <div className='overflow-y-auto flex-1 backface-hidden' data-lenis-prevent-wheel data-lenis-prevent-touch style={{ transform: 'translateZ(30px)' }}>
                <ul className='text-xs md:text-sm space-y-[3px] md:space-y-[10px] backface-hidden'>
                  {item.list.map((child, cIndex) => (
                    <li key={cIndex} className='flex items-center'><i className='hidden md:block size-[5px] rounded-full bg-white mr-[10px]'></i>{child}</li>
                  ))}
                </ul>
              </div>
              <div className='hidden md:block relative size-[40px] mt-[45px] backface-hidden' style={{ transform: 'translateZ(30px)' }}>
                <Image alt='' fill src='/images/product/array1.png' />
              </div>
            </div>
          </li>
        ))}
      </ul>
      <h1 className='flex items-center justify-center text-[#333] text-[16px] md:text-[36px] md:leading-[36px] font-bold space-x-[5px] md:space-x-[10px] mb-[20px] md:mb-[50px]'>
        <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px] rotate-180'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
        <div>保研offer榜单</div>
        <div className='relative w-[22px] md:w-[44px] h-[14px] md:h-[27px]'><Image alt='icon' fill src='/images/page-title-icon.png' /></div>
      </h1>
      <div className='px-0 xl:px-[62px] relative pb-0 md:pb-[20px] overflow-x-auto border 2xl:border-none rounded-[6px] 2xl:rounded-none before:hidden 2xl:before:block before:content-[""] before:absolute before:bottom-0 before:left-0 before:right-0 before:top-[36px] before:border before:rounded-[4px] md:before:rounded-[30px]'>
        <table className='w-[900px] md:w-[1400px] lg:w-[1600px] 2xl:w-full text-center'>
          <thead className='overflow-hidden text-black md:text-white border-b md:border-b-0 relative before:hidden md:before:block before:content-[""] before:absolute before:inset-0 before:bg-gradient-to-r before:from-[#599DE1] before:to-[#125FAF] before:rounded-[4px] md:before:rounded-[8px]'>
            <tr>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>学生</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>本科院校</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative pr-[20px] md:pr-[60px] lg:pr-[100px]'>上岸学校</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>学生</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>本科院校</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative pr-[20px] md:pr-[60px] lg:pr-[100px]'>上岸学校</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>学生</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative before:absolute before:right-0 before:top-[15px] md:before:top-[25px] before:w-[1px] before:h-[10px] md:before:h-[20px] before:bg-white before:content-[""]'>本科院校</th>
              <th className='font-normal py-[10px] md:py-[15px] lg:py-[25px] px-[10px] md:px-[20px] lg:px-[30px] text-xs md:text-base lg:text-[20px] lg:leading-[20px] relative'>上岸学校</th>
            </tr>
          </thead>
          <tbody className='relative z-[1]'>
            {tableList.map((item, index) => (
              <tr key={index}>
                {item.map((c, i) => (
                  <td className={twMerge('text-xs md:text-base lg:text-[18px] text-[#626262] leading-[20px]', (i === 2 || i === 5) && 'pr-0 md:pr-[60px] lg:pr-[70px]')} key={i}>
                    <div className={twMerge('py-[5px] md:py-[10px] lg:py-[15px] px-[10px] md:px-[20px] lg:px-[0] border-b border-[#E5E5E5] border-dashed', index === tableList.length - 1 && 'border-b-0')}>{c}</div>
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  )
}

export default TabLeft